<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<base href="<%=basePath%>"/>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>分店列表</title>
		<link rel="stylesheet" href="res/layui/css/layui.css">
		<script src="res/js/jquery-2.1.4.min.js" type="text/javascript" ></script>
		<script src="res/layui/layui.js"></script>
	</head>
	<body>
	<div style="padding-top: 10px;margin-bottom: -10px;">
		分店名称：
		<div class="layui-inline" style="width: 140px;">
			<input class="layui-input" name="annexName" id="annexName"
				autocomplete="off">
		</div>
		负责人：
		
		<div class="layui-inline">
			<input class="layui-input" name="annexBoss" id="annexPhone"
				autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload" onclick="reloadData()">搜索</button>
		<button data-type="auto" class="layui-btn layui-btn-normal"
			onclick="showAddOrUpdate()">新增</button>
	</div>
	<table class="layui-table" id="fdAnnex" lay-filter="demo"></table> 
	
	
	<script type="text/html" id="demo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script type="text/javascript">
		var table;
		var loadIndex;
		var openIndex;

		function showAddOrUpdate(annexId) {
			var url;
			if (annexId != null) {
				url = "pages/fdAnnexFrom.jsp?annexId="+annexId;
			} else {
				url = "pages/fdAnnexFrom.jsp";
			}
			openIndex = layer.open({
				type : 2//样式
				,
				area : [ '700px', '500px' ],
				title : "分店维护"//标题
				,
				id : 'mesFrom' //防止重复弹出
				,
				content : url,
				shade : [ 0.8, '#393D49' ] //显示遮罩
				,
				shadeClose : true//点击也能遮罩层关闭
				,
				anim : 2
			//弹出动画 
			});
		}

		function deleteRec(annexId, i) {
			var url = "annex/deleteAneex.action";
			$.post(url, {
				"annexId" : annexId
			}, function(info) {
				layer.msg(info.mes);
				layer.close(i);
			});
		}

		layui.use([ 'table' ], function() {

			table = layui.table;
			loadIndex = layer.load();
			//方法级渲染
			table.render({
				loading : true,
				id : 'annexId',
				page : true,
				height : 383,
				size : "sm",
				elem : '#fdAnnex',
				url : 'annex/annexAjax.action',
				method : 'post',
				where : {

				},
				cols : [ [ {
					field : 'annexNumber',
					title : '分店编码',
					width : 80,
					align : 'center'
				}, {
					field : 'annexName',
					title : '分店名称',
					width : 120,
					align : 'center'
				}, {
					field : 'annexPhone',
					title : '联系电话',
					width : 100,
					align : 'center'
				}, {
					field : 'annexBoss',
					title : '负责人',
					width : 80,
					align : 'center'
				},{
					field : 'annexAdd',
					title : '备注',
					width : 100,
					align : 'center'
				},{
					field : 'timeTrs',
					title : '创建时间',
					width : 100,
					align : 'center'
				}, {
					fixed : 'right',
					width : 150,
					align : 'center',
					toolbar : '#demo'
				} ] ]

				,
				done : function(res, curr, count) {
					layer.close(loadIndex);//加载层关闭  
				}
			});

			//监听工具条
			table.on('tool(demo)', function(obj) {
				var data = obj.data;
				if (obj.event === 'del') {
					layer.confirm('真的删除行么', function(index) {
						if(data.annexMoney!=0){
							layer.msg('不能操作该数据！',{icon: 5,anim: 6});
						}else{
							var i = layer.load();
							deleteRec(data.annexId, i);
							obj.del();
						}
						layer.close(index);
					});
				} else if (obj.event === 'edit') {
					showAddOrUpdate(data.annexId);
				}
			});

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
		});
		
		function reloadData(){
			table.reload('annexId', {
				where : {
					'annexName' : $("#annexName").val(),
					'annexPhone' : $("#annexPhone").val()
				}
			});
		}
		
	</script>

</body>
</html>